<template>
  <div class="container">
    <div class="app-container">
      <!-- 角色管理内容 -->
      <div class="role-operate">
        <el-button size="mini" type="primary" class="elbutton" @click="addclick(1,0)">添加权限</el-button>
      </div>
      <!-- 放置table组件 -->
      <el-table :data="tableList" style="width: 100%" row-key="id">
        <!-- 放置列 -->
        <el-table-column fixed prop="name" label="姓名" width="320" align="center" />
        <el-table-column prop="code" label="标识" width="280" align="center" />
        <el-table-column prop="description" label="描述" width="280" align="center" />
        <el-table-column fixed="right" label="操作" width="320" align="center">
          <template v-slot="{row}">
            <el-button v-if="row.type === 1" type="text" size="small" @click="addclick(2,row.id)">添加</el-button>
            <el-button type="text" size="small" @click="editclick(row.id)">编辑</el-button>
            <el-button type="text" size="small" @click="delclick(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 表单弹框 -->
      <el-dialog width="500px" :title="isEdit?'编辑权限点':'新增权限点'" :visible.sync="showDialog" @close="close">
        <!-- 表单内容 -->
        <el-form ref="roleForm" :model="roleForm" :rules="rules" label-width="120px">
          <el-form-item label="权限名称" prop="name">
            <el-input v-model="roleForm.name" style="width:300px" size="mini" />
          </el-form-item>
          <el-form-item label="权限标识" prop="code">
            <el-input v-model="roleForm.code" style="width:300px" size="mini" />
          </el-form-item>
          <el-form-item label="权限描述" prop="description">
            <el-input v-model="roleForm.description" type="textarea" :rows="3" style="width:300px" size="mini" />
          </el-form-item>
          <el-form-item label="启用">
            <!-- 如果不需要校验 就不需要写 prop属性 -->
            <el-switch v-model="roleForm.enVisible" :active-value="1" :inactive-value="0" size="mini" />
          </el-form-item>
          <el-form-item>
            <el-row type="flex" justify="center">
              <el-col :span="12">
                <el-button type="primary" size="mini" @click="addButton">确定</el-button>
                <el-button size="mini" @click="cancelButton">取消</el-button>
              </el-col>
            </el-row>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getPermissionList, postPermissionList, delPermissionList, getSysPermissionList, putPermissionList } from '@/api/permission'
// 递归函数
import { dataRecursion } from '@/utils'
export default {
  name: 'Permission',
  data() {
    return {
      // 用于接收ajax响应回来数据 渲染表单页面的数组
      tableList: [],
      // 表单弹框默认关闭
      showDialog: false,
      // 声明一个变量 来控制 我们点击的是编辑true按钮 还是新增按钮false
      isEdit: false,
      // 点击编辑后的表单内容
      roleForm: {
        name: '', // 权限名称
        code: '', // 权限点标识
        description: '', // 角色描述
        enVisible: 1, // 权限点开启状态 默认是启用的,1启用状态 0未启用状态
        // 页面权限是1 按钮权限 2 用户按了什么值 就手动修改成1 和2
        type: null,
        pid: null,
        id: null // 用于发送编辑确认
      },
      // 表单非空和正则校验
      rules: {
        name: [{ required: true, message: '请输入权限名称', trigger: 'blur' },
          { min: 2, max: 10, message: '请输入2-10位权限名称', trigger: 'blur' }],
        code: [{ required: true, message: '请输入权限标识', trigger: 'blur' },
          { min: 2, max: 10, message: '请输入2-10位权限标识', trigger: 'blur' }],
        description: [{ required: true, message: '请输入角色描述', trigger: 'blur' },
          { min: 1, max: 100, message: '请输入1-100位角色描述', trigger: 'blur' }]
      }
    }
  },
  // 通过created钩子去发送请求
  created() {
    this.getPermission()
  },
  methods: {
    // 发送ajax用于渲染页面
    async getPermission() {
      const res = await getPermissionList()
      // console.log(res)
      // 但是 这个是一个平铺的数据 我们要把他转化成树形元素 这个时候 需要调用一个递归的函数
      this.tableList = dataRecursion(res, 0)
    },
    // 模态框 点击X取消
    close() {
      // 关闭模态框
      this.showDialog = false
      // 把变量的数据恢复为初始值
      this.isEdit = false
      // 清空表单
      this.$refs.roleForm.resetFields()
    },
    // 添加权限点和下面的添加 公用一个事件 但是传参不一样
    addclick(type, id) {
      // 点击弹出模态框
      this.showDialog = true
      // 变量值为false
      this.isEdit = false
      // 发送ajax请求
      this.roleForm.type = type
      this.roleForm.pid = id
    },
    // 弹框确定按钮
    addButton() {
      // 所有校验规则都通过才可以点击确认按钮
      this.$refs.roleForm.validate(async valid => {
        if (valid) {
          // 此处需要做一个条件判断 若定义的变量isEdit为true 则代表为编辑 否则为新增
          if (this.isEdit) {
            // 发送编辑的axios
            const res = await putPermissionList(this.roleForm)
            console.log(res)
            // 提示框
            this.$message('编辑权限点成功')
            // 调用模态框X
            this.close()
            // 调用函数渲染页面
            this.getPermission()
          } else {
            // 若条件都满足 则可以直接发送ajax 发送新增的axios
            await postPermissionList(this.roleForm)
            // 提示框
            this.$message('新增权限点成功')
            // 调用模态框X
            this.close()
            // 调用函数渲染页面
            this.getPermission()
          }
        }
      })
    },
    // 弹框取消按钮
    cancelButton() {
      // 提示框
      this.$message('已取消')
      // 调用模态框X
      this.close()
    },
    // 表格里面删除按钮
    async delclick(id) {
      // 调用删除的axios
      await delPermissionList(id)
      // 再次渲染页面
      // 提示框
      this.$message('已删除')
      // 调用函数渲染页面
      this.getPermission()
    },
    // 点击编辑按钮
    async editclick(id) {
      // 点击弹出模态框
      this.showDialog = true
      // 变量值为false
      this.isEdit = true
      // 发送ajax做编辑的数据回显功能
      const res = await getSysPermissionList(id)
      console.log(res)
      this.roleForm = res
    }
  }
}
</script>

<style lang="scss" scoped>

.elbutton{
  margin: 10px;
}
</style>
